/**********************************
           button
***********************************/
.button {
    -fx-background-color:
    linear-gradient(from 0.0% 0.0% to 100.0% 0.0%, #1c84ecff 0.0%, #ac0eeb99 100.0%);
    -fx-font-family: "Comic Sans MS";
    -fx-font-style: italic;
    -fx-font-size: 30;
    -fx-text-fill: #16e3f2e5;
    -fx-border-radius: 20px;
    -fx-background-radius: 20px;
}

.button:hover {
    -fx-background-color:linear-gradient(from 0.0% 0.0% to 100.0% 0.0%, #fa476cff 0.0%, #405ffdff 100.0%);
    -fx-text-fill: #19e1f0ff;
    -fx-font-weight: Bold;
}
/***********************************
                text filed
***********************************/
.text-field {
    -fx-pref-width: 240;
    -fx-pref-height: 50;
    -fx-background-color: transparent;
    -fx-border-width: 0 ;
    -fx-font-family: "Bell MT";
    -fx-font-style: italic;
    -fx-text-fill:
    linear-gradient(from 25.5% 94.89999999999999% to 16.3% 0.0%, #1a2d6dff 0.0%, #b11f1eff 50.0%, #fcba2eff 100.0%);
    -fx-prompt-text-fill:#433f46ff;
    -fx-padding:0 5px 0 5px;
    -fx-font-size: 35;
    -fx-spacing:4px;
    -fx-border-radius: 3px;
    -fx-background-radius: 10px;
}
/**************************************
                hbox
**************************************/
.hb-input{
    -fx-alignment:center;
    -fx-background-color:
    linear-gradient(from 0.0% 0.0% to 100.0% 0.0%, #9becfcff 0.0%, #64c7f8ff 50.0%, #308ef280 100.0%);
    -fx-padding:0 5px 0 5px;
    -fx-spacing:4px;
    -fx-border-color:#4567ffff;
    -fx-border-radius: 10px;
    -fx-background-radius: 10px;
}
